<template>
	<view class="home">
		<view class="search">
			<view class="input">
				<icon class="icon" color: #000; type="search" size="20" />搜索</view>
		</view>
		<view class="swiper">
			<swiper class="box" indicator-dots autoplay circular indicator-color="#fff" indicator-active-color="rgba(255,255,255,0.3)">
				<block v-for="(item,index) in 4">
					<swiper-item>
						<image src="../../static/images/1.jpg"></image>
					</swiper-item>
				</block>
			</swiper>
		</view>
		<view class="nav">
			<view class="item">
				<image src="../../static/images/1.jpg" mode=""></image>
				分类
			</view>
			<view class="item">
				<image src="../../static/images/1.jpg" mode=""></image>
				秒杀拍
			</view>
			<view class="item">
				<image src="../../static/images/1.jpg" mode=""></image>
				超市购
			</view>
			<view class="item">
				<image src="../../static/images/1.jpg" mode=""></image>
				母婴品
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageList: [
					"https: //cdn.cnbj1.fds.api.mi-img.com/mi-mall/3d9f8cf47b5eeb286a83e6e95a60105a.jpg?w=2452&h=920",
					"https: //cdn.cnbj1.fds.api.mi-img.com/mi-mall/5996037f1186354a680dfd7c050d32d6.jpg?thumb=1&w=1226&h=460&f=webp&q=90",
					"https: //cdn.cnbj1.fds.api.mi-img.com/mi-mall/9ebff5f5c1f52f2dbdd611897adbefd4.jpg?thumb=1&w=1226&h=460&f=webp&q=90"
				]
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="less">
	.home {
		background-color: #eee;

		.search {
			background-color: #eb4450;
			padding: 20rpx 16rpx;

			.input {
				height: 60rpx;
				background-color: #fff;
				width: 100%;
				color: #ccc;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 5rpx;

				.icon {

					margin-right: 5px;

				}
			}
		}

		.swiper {
			width: 100%;
			height: 340rpx;

			.box {
				width: 100%;
				height: 100%;

				image {
					width: 100%;
					height: 340rpx;
				}
			}
		}

		.nav {
			height: 194rpx;
			display: flex;
			justify-content: space-around;
			background-color: #fff;
			align-items: center;

			.item {
				width: 128rpx;
				height: 140rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>
